//获取搜索按钮
var searchBtn = document.querySelector('.search-container button')
var inputEle = document.querySelector('.search-container input')
//render(data.list)

//点击搜索按钮, 发起ajax请求, 传参数给服务器端, 服务器端返回搜索的结果
searchBtn.onclick = () => {
    axios.get('/user/search', { params: { searchkey: inputEle.value } }).then((res) => {
        render(res.data.list)
    })
}

//点击上一页,获取上一页的数据

document.querySelector('.btns .pre').onclick = function () {
    //点
    axios.get('/user/list', { params: { page: --page, count: 2 } }).then((res) => {
        console.log(res);
        // if (page <4) {
        render(res.data.list)

        // }
    })

}
//点击下一页,获取下一页的数据
document.querySelector('.btns .next').onclick = function () {
    axios.get('/user/list', { params: { page: ++page, count: 2 } }).then((res) => {
        // console.log(res);
        render(res.data.list)
    })
}
        
function render(data) {
    var str = ``
    str = data.map((item, index) => {
        return `
                <tr>
                    <td>${item.email}</td>
                    <td>${item.name}</td>
                    <td>${item.phone}</td>
                    <td>${item.isgroup ? '编辑组' : '其他组'}</td>
                    <td>${item.isadmin ? '是' : '否'}</td>
                    <td><span class=" ${item.status ? 'statusok' : 'error'}">${item.status ? '正常' : '异常'}</span> </td>
                    <td class="iconfont icon-xiugaioryijian"><td class="iconfont icon-shanchu"></td></td>
                </tr>
        `
    }).join('')
    if (str == '') {
        str = `<td style="text-align:center;color:red">未查询到数据</td>`
    }
    document.querySelector('tbody').innerHTML = str;
}
// /axios是从axios.min.js文件中暴露的 用来发送ajax请求的一个对象
axios.get('/user/list', { params: { page: 1, count: 2 } }).then((res) => {
    //调用render方法, 传入后端返回的数据 渲染列表
    render(res.data.list);
    console.log(res.data);
})

axios.post('/user/login', { phone: '18893035778', pass: '1234' }).then((res) => {
    console.log(res.data);
})
